<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="/js/ajaxfileupload.js"></script>
    <style>
        #test,#test1{min-height:250px;overflow-y:auto;max-height:300px;}
    </style>
    <title>导入数据</title>
</head>
<body>
   <div  id="app" class="container">

       <!--第一行 系统logo-->
       <div class="row clearfix">
           <div class="col-md-4 column">
           </div>
           <div class="col-md-4 column">
               <h1>医疗数据挖掘平台</h1>
           </div>
           <div class="col-md-4 column">
           </div>
       </div>


       <div class="row clearfix">
           <!--左侧菜单-->
           <div class="col-md-2 column">
           </div>
           <!--右侧内容显示模块-->
           <div class="col-md-10 column">
               <div class="row clearfix">
                   <div class="col-md-3 column">
                   </div>
                   <div class="col-md-3 column">
                       <button type="button" class="btn btn-primary" @click="Edit()">编辑数据</button>
                   </div>
                   <div class="col-md-3 column">
                   </div>
                   <div class="col-md-3 column">
                       <button type="button" class="btn btn-primary"  @click="Save()">保存数据</button>
                   </div>
               </div>
           </div>

       </div>
   </div>
   <br/><br/><br/>







       <!--第一行 -->
       <div class="row clearfix">
           <div class="col-md-3 column">
           </div>
           <div class="col-md-3 column">
               <button type="button" class="btn btn-primary" @click="Edit()">编辑数据</button>
           </div>
           <div class="col-md-3 column">
           </div>
           <div class="col-md-3 column">
               <button type="button" class="btn btn-primary"  @click="Save()">保存数据</button>
           </div>
       </div>

       <br/><br/>
       <div class="row clearfix">
           <div class="col-md-2 column">
                   <input id="docFile" type="file" style="display: none" name="file" class="form-control" @change="mychange"/>
           </div>
           <div class="col-md-1 column">
               <button type="button" class="btn btn-info" @click="mybrows">选择文件</button>
           </div>
           <div class="col-md-3 column">
               <input id="filePath" type="text" class="form-control"  placeholder=".xls/.xlsx/.arff/.csv" style="height: 30px"/>
           </div>

           <div class="col-md-2 column">
               <button id="submit" type="button" class="btn btn-info" @click="mysubmit()">提交文件</button>
           </div>
           <div class="col-md-3 column">
                <!--进度条-->
               <progress style="height: 30px"></progress>
           </div>
       </div>
       <br/><br/>
       <div  class="row clearfix">
           <div class="col-md-2 column">

           </div>
           <div class="col-md-1 column">
               <button type="button" class="btn btn-info">选择过滤器</button>
           </div>
           <div class="col-md-3 column">
               <input type="text" class="form-control"/>
           </div>

           <div class="col-md-3 column">
               <button type="button" class="btn btn-info">应用过滤器</button>
           </div>
       </div>
       <br/>
       <div class="row clearfix">
           <div class="col-md-2">
           </div>
           <div class="col-md-3">
               <label>文件名：</label> &nbsp; &nbsp;
               <label style="color: #942a25">{{instancesEntityFirst.file_name}}</label>
           </div>
           <div class="col-md-3">
               <label>属性数：</label> &nbsp; &nbsp;
               <label style="color: #942a25">{{instancesEntityFirst.attributes_size}}</label>
           </div>
           <div class="col-md-3">
               <label>实例数：</label> &nbsp; &nbsp;
               <label style="color: #942a25">{{instancesEntityFirst.instance_size}}</label>
           </div>
       </div>
       <br/>
       <div class="row clearfix">
           <div class="col-md-2">
           </div>
           <div class="col-md-2" id="test">
               <table class="table table-hover">

                 <tr>
                     <td>
                         &nbsp; &nbsp;<input type="checkbox" @click="selectAll()"/>
                     </td>
                     <td align="center">
                         &nbsp; &nbsp;&nbsp;<label>全选/全不选</label>
                     </td>
                 </tr>
                   <tr>
                       <td align="center">
                           列号
                       </td>
                       <td align="center">
                           &nbsp; &nbsp;&nbsp;<label style="color: #0480be">&nbsp;&nbsp;列名</label>
                       </td>
                   </tr>

                   <tr  v-for="(item,index) in attribute_list " @click="trclick(item,index)">
                       <td align="center">
                            &nbsp;<input type="checkbox" v-bind:checked="item.checked" @click="myselect(item)"/>
                       </td>
                       <td align="center">
                           &nbsp;&nbsp;<label>&nbsp;{{index+1}}&nbsp;{{item.atttribuy_name}}</label>
                       </td>
                   </tr>
               </table>
               <br/>
               &nbsp;&nbsp; &nbsp;&nbsp;<button type="button" class="btn btn-danger" @click="Remove()">删除</button>
       </div>

           <div class="col-md-8" >
               <div class="row clearfix">
                   <label>列名：</label>
                   <label  style="color: #169426">{{result.attribute_Name}}</label>
                   &nbsp;&nbsp; &nbsp;&nbsp;
                   <label>数据类型：</label>
                   <label  style="color: #091994"> {{result.num_type}}</label>
                   &nbsp;&nbsp; &nbsp;&nbsp;
                   <label>缺失率：</label>
                   <label  style="color: #94170d">{{result.missing}}({{result.missing_percentage}})</label>
                   &nbsp;&nbsp; &nbsp;&nbsp;
                   <label>属性值数量：</label>
                   <label  style="color: #309468"> {{result.distinct}} </label>
                   &nbsp;&nbsp; &nbsp;&nbsp;
                   <label>独享属性值数量：</label>
                   <label  style="color: #940c85"> {{result.unique}} </label>
               </div>
               <div class="row clearfix" id="test1">
                   <table class="table table-striped" id="StrOrNom">
                       <thead>
                       <tr>
                           <th>&nbsp;&nbsp; &nbsp;&nbsp;</th>
                           <th>&nbsp;&nbsp; &nbsp;Name&nbsp;&nbsp; </th>
                           <th>&nbsp;&nbsp; &nbsp;Counter&nbsp;&nbsp; </th>
                           <th>&nbsp;&nbsp; &nbsp;Weight&nbsp;&nbsp; </th>
                       </tr>
                       </thead>
                       <tbody>
                       <tr  v-for="(item,index) in result.list">
                           <th>&nbsp;&nbsp; {{index}}&nbsp;&nbsp;</th>
                           <th>&nbsp;&nbsp; &nbsp;{{item.lable}}&nbsp;&nbsp; </th>
                           <th>&nbsp;&nbsp; &nbsp;{{item.count}}&nbsp;&nbsp; </th>
                           <th>&nbsp;&nbsp; &nbsp;{{item.weight}}&nbsp;&nbsp; </th>
                       </tr>
                       </tbody>
                   </table>

                   <table class="table table-striped" id="Numeric">
                       <thead>
                       <tr>
                           <th>&nbsp;&nbsp; &nbsp;</th>
                           <th>统计信息</th>
                           <th>统计值</th>
                       </tr>
                       </thead>
                       <tbody>
                       <tr>
                           <td>&nbsp;&nbsp; &nbsp;1</td>
                           <td>MaxValue</td>
                           <td>{{result.maxValue}}</td>
                       </tr>
                       <tr>
                           <td>&nbsp;&nbsp; &nbsp;2</td>
                           <td>MinValue</td>
                           <td>{{result.minValue}}</td>
                       </tr>
                       <tr>
                           <td>&nbsp;&nbsp; &nbsp;3</td>
                           <td>Mean</td>
                           <td>{{result.mean}}</td>
                       </tr>
                       <tr>
                           <td>&nbsp;&nbsp; &nbsp;4</td>
                           <td>StdDev</td>
                           <td>{{result.stdDev}}</td>
                       </tr>
                       </tbody>
                   </table>
               </div>
           </div>
       </div>
   </div>

   <script>
       $(document).ready(function(){

      document.getElementById("Numeric").style.display="none";
           var vu=new Vue({
               el:'#app',
               data:{
                   lg:0,
                   mystate:0,
                   instancesEntityFirst:"",
                   checkAll:false,
                   attribute_list:[],
                   result:"",//点击单个属性时的返回结果
                   remove_list:[]
               },
               mounted:function(){

               },
               methods:{
                   mysubmit:function(){
                      // alert("提交文件")
                       var that=this;
                       if(lg==0){
                           alert("抱歉，您还没有选择文件！")
                           return;
                       }
                       $.ajaxFileUpload({
                           //文件上传接口
                           url : '/fileController/fileupload',
                           secureuri : false,
                           fileElementId : 'docFile',
                           dataType: 'json',   //服务器返回的数据类型。可以为xml,script,json,html。如果不填写，jQuery会自动判断。
                           async : true,   //是否是异步
                           //成功回调
                           success:function(data) {
                               //第一步：进度条更新
                               that.mystate++;
                               $("progress").val("100");
                               //第二步：获取返回的数据
                               if(data.state==400){
                                   alert(data.error_message)
                                   return
                               }
                               that.instancesEntityFirst=data,
                                       that.attribute_list=data.attribute_list
                               console.log(that.data);
                           },
                           error:function(data, status, e) {
                               alert("上传发生异常"+e);
                           }
                       })
                   },

                   //选择文件按钮（使用了代理模式）
                   mybrows:function () {
                       $('#docFile').click();
                   },

                   mychange:function(){
                       var fp = $("#docFile");
                       lg = fp[0].files.length;

                       var items = fp[0].files;
                       var message=""
                       if (lg > 0) {
                           for (var i = 0; i < lg; i++) {
                               var fileName = items[i].name; // get file name
                               message=fileName
                               var i = fileName.lastIndexOf(".");

                               if(i > -1) {
                                   var ext = fileName.substring(i);
                                   if((ext==".csv")||(ext==".arff")||(ext==".xlsx")||(ext==".xls")){
                                       $("#filePath").val(message)
                                   }else{
                                       alert("选择的文件格式错误！")
                                   }
                               }
                           }
                       }
                   },

                   trclick:function(item,index){
                       var that=this;
                       var url="/fileController/attributeAnalysis_nom0rStr"
                       var attributeType=item.attribute_type
                       //判断选择的属性的属性类型  然后选择不同的接口
                       if(attributeType=="Nominal"||attributeType=="String"){
                           //
                           document.getElementById("StrOrNom").style.display="block";
                           document.getElementById("Numeric").style.display="none";

                       }else if(attributeType=="Numeric"||attributeType=="Date"){
                           url="/fileController/attributeAnalysis_num"
                           document.getElementById("StrOrNom").style.display="none";
                           document.getElementById("Numeric").style.display="block";
                       }

                       //属性分析请求
                       axios.get(url,{
                           params: {
                               attributeName:item.atttribuy_name,
                               index:index
                           }
                       }).then(function(response){
                           if(response.data.state==400){
                               alert(response.data.error_messaege)
                               return
                           }
                           that.result=response.data

                       },function(errormessage){

                       })
                   },

                   myselect:function(item){
                       if(typeof item.checked == "undefined"){
                           this.$set(item ,"checked",true)
                       }else{
                           item.checked = !item.checked;
                       }
                   },

                   selectAll:function(){
                       var _this=this;
                       var isCheck=_this.checkAll;
                       _this.attribute_list.forEach(function(item){
                           if(typeof item.checked == "undefined"){
                               _this.$set(item,"checked",!isCheck);
                           }else{
                               item.checked = !isCheck;
                           }

                           _this.checkAll=!isCheck;
                       })


                   },

//删除操作
                   Remove:function(){
                       var that=this;
                       var counter=0;
                       //第一步：获取被选中的目标集合
                       that.attribute_list.forEach(function(item){
                           if(!(typeof item.checked == "undefined")){
                               if(item.checked==true){
                                   alert(item.atttribuy_name)
                                   that.remove_list.push(counter)
                               }
                           }
                           counter++;
                       });
                       //第二步：调用后台接口删除数据
                       var url="/fileController/attribute_remove"
                      // alert("删除动作调用")
                       $.ajax({
                           type : "get",
                           url : url,
                           data :{
                               remove_list:that.remove_list,
                               file_name:that.instancesEntityFirst.file_name},
                           success : function(response) {
                              if(response.state==400){
                                  alert(response.error_message)
                                  return
                              }
                               that.remove_list=[]
                               that.instancesEntityFirst=response,
                                       that.attribute_list=response.attribute_list
                       },
                       error : function(e) {
                           alert('Error: ' + e);
                       }
                   });
                   },
//编辑数据
                   Edit:function(){
                       //发送请求跳转到新的页面
                       window.open("/html/edit_page.html")
                   },
//保存数据
                   Save:function(){
                       //保存文件
                       var url="/fileController/file_save"
                       axios.get(url,that.instancesEntityFirst.file_name)
                               .then(function(response){
                            if(response.data.state==200){
                                alert("保存成功！")
                            }else if(response.data.state==400){
                                alert(response.data.error_message)
                            }
                       },function(error){

                       })
                   }
               },
               computed:{
               /*    //请求成功
                   mystate:function () {
                       that=this;
                       axios.get('/fileUpload/analy').then(function(response){
                           console.log(response.data);
                           that.dataInfo=response.data;
                       },function(errormessage){
                           alert(errormessage)
                       })
                   }*/
               }
           });
       });

   </script>

</body>
</html>